<template>
  <!-- 评论模块       -->
  <el-card   class="card-body" style="padding: 24px;">
    <div class="mb-3 d-flex align-items-center" v-if="userStore.status">
      <!--   评论输入    -->
      <div class="me-2" style="" >
        <el-avatar style="width: 30px;height: 30px; border-radius: 25px"  :src="userStore.avatar" alt="img" />
      </div>
      <div class="w-100 py-1 radius-5 p-3" style="background: #FAFAFA;" >
        <input
            class="custom-input"
            style="width: 100%;background: #FAFAFA;"
            placeholder="快来发表你的看法吧"
            type="text"
            v-model="state.comment.text"
            @focus="method.handleFocus"
            @blur="method.handleBlur"
        />
        <div v-if="state.isShow.comment_enter" class="d-flex justify-content-sm-between mt-1" >
          <img alt="svg" src="/src/assets/svg/emoji-1.svg" style="width: 16px;height: 16px" />
          <el-button @click="method.sendComment"  class="d-flex " size="small">发送</el-button>
        </div>
      </div>

    </div>
    <!--   未登录状态       -->
    <div v-else>
      <div class="d-flex justify-content-center " >
        <button class="btn mx-1 btn-auto mimic action " style="background: #b69c66; color: #ffffff;border-radius: 200px; size: 20px;text-align: center">
          <span class="d-flex align-items-center"><el-icon><User /></el-icon >  <span @click="dialogStore.openLoginDialog()"  style="margin-left: 4px">登录</span> </span>
        </button>
      </div>
      <!--          -->
      <div class="d-flex justify-content-center mt-2" style="color: #999999; size: 12px" >
        喜欢这篇文章吗？
      </div>
      <!--          -->
      <div class="d-flex justify-content-center"  style="color: #999999; size: 12px">
        登录发表你的看法吧！
      </div>
    </div>
    <!--   未登录状态end       -->
    <!--   评论功能       -->
    <div>
      <div class="d-flex justify-content-between">
        <div style="color: #999999; size: 16px" > <el-icon><ChatLineSquare /></el-icon> 评论 {{state.comment.count}}</div>
        <div>
          <el-switch
              @change="method.reLoadComment()"
              v-model="state.comment.order"
              inline-prompt
              active-text="正序"
              inactive-text="倒序"
          /></div>
      </div>
      <div v-if="state.isShow.comment">
        <div v-for="(item,key) in state.comment.data" class="p-2">
          <!--  评论者的信息  头像 昵称 时间  -->
            <div class="d-flex">
              <el-avatar :src="formatUrl(item.user.avatar)" alt="img" class="mr-2" ></el-avatar>
              <div>
                <div style="font-weight: 500;color:#61666d ">{{item.user.nickName}}</div>
              </div>
           </div>

            <div>
              <!--  评论内容  -->
              <div style="position: relative; left: 45px;top: -10px"  >
                <p style="color: #18191c;max-width: 95%; word-wrap:break-word; margin-bottom: 0 ">{{item.comment}}</p>
                <div class="d-flex align-items-center" style="color: #8a8a8a;">
                  <div style="font-size:16px;margin-right: 10px; color: rgb(97, 102, 109)"  >{{formatDateTime(item.createTime)}}</div>
                  <span  @click="method.likeComment(item.id)" class="d-flex align-items-center " ><img style="height: 16px; width: 16px;" src="/src/assets/svg/like-begin.svg" alt="svg" />{{item.likes}} </span>
                  <span @click="replyComment(item.id,item.uid,key,item.user.nickName)" class="align-items-center" style="margin-left: 10px" ><el-icon :size="16"><ChatRound /></el-icon></span>
                </div>
              </div>
              <!--  评论内容下的  -->
              <!-- 子评论   -->
              <div v-for="(item2,index) in item.childrenComment" class="p-2" style="background:#f2f3f5;margin-left: 40px">
                <!--            <span style="color: #0269c8" >{{item2.username}}</span>:<span>{{item2.comment}}</span>-->
                <div class="d-flex ">
                  <el-avatar :src="formatUrl(item2.user.avatar)" alt="img" size="small" class="mr-2"></el-avatar>
                  <div>
                    <div style="font-weight: 500;color:#61666d;font-size:14px">
                      <span style="margin-right: 4px" v-if="item2.target">{{item2.user.nickName}}回复@{{item2.target}}</span>
                      <span style="margin-right: 4px"  v-else>{{item2.user.nickName}}</span>
                      <span style="color:#18191c;font-size:14px;max-width: 800px;word-wrap:break-word; ">{{item2.comment}}</span>
                    </div>
                    <!--  点赞  评论  -->
                    <div class="d-flex align-items-center" >
                      <div style="color: #8a8a8a; font-size:12px;margin-right: 10px; " >{{formatDateTime(item2.createTime)}}</div>
                      <span  @click="method.likeComment(item2.id)" class="d-flex align-items-center " ><img style="height: 14px; width: 14px;" src="/src/assets/svg/like-begin.svg" alt="svg" />{{item2.likes}}</span>
                      <span @click="replyComment(item.id,item2.uid,key,item2.user.nickName)" class="align-items-center" style="margin-left: 10px" ><el-icon :size="14"><ChatRound /></el-icon></span>
                    </div>
                  </div>
                </div>
              </div>
              <!--  回复框  -->
              <div style="padding: 25px 0 20px 0" class="flex"  v-if="state.comment.reply.key === key ">
                <el-avatar style="width: 40px;height: 40px; border-radius: 25px; margin: 0 10px 0 10px"  :src="userStore.avatar" alt="img"/>
                <div style="width:100%;">
                  <el-input v-model="state.comment.reply.text" type="text" :placeholder="'回复 @'+state.comment.reply.target+':'" ></el-input>
                  <div  class="d-flex justify-content-sm-between mt-1">
                    <el-avatar alt="svg" src="/src/assets/svg/emoji-1.svg" style="width: 16px;height: 16px" />
                    <el-button @click="sendReplyComment" class="d-flex " size="small">发送</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--   分割线  -->
          <el-divider> </el-divider>
            <!--      <el-icon> END </el-icon>-->
        </div>
      <!--   没有评论   -->
      <div v-else>
        <el-empty style="max-height: 200px"></el-empty>
      </div>
      <!--   评论功能 end      -->
    </div>
  </el-card>

</template>
<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import {formatDateTime,formatUrl} from "@/utils/tools/format";
import {GetComment,makeComment} from "@/api/comment/comment";
import {ElNotification} from "element-plus";
import {ChatLineSquare} from "@element-plus/icons-vue";
import {useUserStore} from "@/store/modules/user";
import {useDialogStore} from "@/store/index/dialog";
import {getLikeCount, like} from "@/api/like/like";
const userStore = useUserStore();
const dialogStore = useDialogStore()
const props = defineProps({
  id:undefined,
  type:String
})
let comment_reply=ref(false);

const  state = reactive({
  comment:{
    type:undefined,
    id:undefined,
    order:false,
    likes:0,
    count:0,
    data:{},
    text:"",
    reply:{
      key:"",
      text:"",
      target:"",
      uid:undefined,
      pid:undefined,
    },
    model:{
      id:undefined,
      uid:undefined,
      pid:undefined,
      articleId:undefined,
      reignId:undefined,
      username:undefined,
      comment:undefined,
      state:undefined,
      createTime:undefined,
      rate:undefined,
      target:undefined,
      likes:undefined
    },
  },
  isShow:{
    comment:false, //是否显示评论
    comment_enter:false,  //是否开启评论
  },
  isLike:false,

})

const method ={
  init:async ()=>{
    state.comment.id =props.id
    state.comment.type =props.type
  },
  /**
   * 获取评论
   */
  getCommentInfoById: async ()=>{
    const id = state.comment.id;
    await GetComment(id,state.comment.order).then(res =>{
      state.comment.data = res.data.comments;
      state.comment.count = res.data.count;
      if (state.comment.data.length>0){
        state.isShow.comment =true;
      }
    })
  },
  /**
   * 发送评论
   */
  async sendComment(){
    //发送前要做的事
    state.comment.model.comment =state.comment.text;
    state.comment.model.articleId =state.comment.id;
    state.comment.model.uid = userStore.id;
    state.comment.model.username = userStore.userName;
    await makeComment(state.comment.model).then(res=>{
      ElNotification( {title:"请求成功", message: res.msg,type: 'success' })
    })
    state.comment.text= ""
    state.isShow.comment_enter =false
    state.comment.model ={};
    await method.reLoadComment();
  },
  /**
   * 点赞评论
   */
  async likeComment(id){
      await  like(4,id).then(async res => {
        ElNotification({title: "请求成功", message: res.msg, type: 'success'})
        await method.reLoadComment(id)
      })
  },
  // /**
  //  * 获取评论点赞数
  //  */
  // async getCommentLikes(id){
  //    getLikeCount(4,id).then(res =>{
  //      state.comment.likes = res.data;
  //    })
  // },
  /**
   * 重新加载评论
   */
  async reLoadComment(){
    if (state.comment.id != null) await method.getCommentInfoById();
    state.isShow.commen =false;
    await nextTick(() => {
      state.isShow.commen = true;
    })
  },
  /**
   * 点击评论框显示评论发送按钮
   */
  handleFocus(){
    state.isShow.comment_enter = true;
  },
  /**
   * 焦点离开评论框隐藏评论发送按钮
   */
  handleBlur(){
    if (!state.comment.text)state.isShow.comment_enter =false;
  },
}

function  handleFocusComment(){
  comment_reply.value = true;
}
function handleBlurComment(){
  comment_reply.value = false;
}

/**
 * 评论回复
 */
function replyComment(pid,uid,key,target){
  //回复要做的事
    state.comment.model={};
    state.comment.model.articleId =state.comment.id;
    state.comment.model.uid = userStore.id;
    state.comment.model.username = userStore.userName;
    state.comment.model.pid = pid;
    state.comment.model.target = target;
    //显示回复评论框
    if (state.comment.reply.uid===undefined && state.comment.reply.pid===undefined){
      state.comment.reply.key = key
      state.comment.reply.uid =uid
      state.comment.reply.pid =pid
      state.comment.reply.target =target
    } else if (state.comment.reply.uid===uid &&state.comment.reply.pid === pid ) {
      state.comment.reply.key =""
      state.comment.reply.uid =undefined
      state.comment.reply.pid =undefined
    }else {
      state.comment.reply.key =key
      state.comment.reply.uid =uid
      state.comment.reply.pid =pid
      state.comment.reply.target =target
    }
}
async function sendReplyComment() {
  state.comment.model.comment = state.comment.reply.text;
  await makeComment(state.comment.model).then(res => {
    ElNotification({title: "Success", message: res.msg, type: 'success'})
    state.comment.reply.key =""
    state.comment.reply.uid =undefined
    state.comment.reply.pid =undefined
    state.comment.reply.target =""
    state.comment.reply.text=""
    state.comment.model={};
    if (state.comment.id != null) method.reLoadComment()
  })
}

onMounted(() => {
  //页面初始化
  method.init();
  if (state.comment.id != null) method.getCommentInfoById();
})

</script>
<style scoped>

</style>
